<template>
  <view>
    <view v-if="overline" class="form-fee-borderline"></view>
    <view v-for="(item, index) in contractList" :key="index" class="form-fee-content">
      <view class="form-fee-content-title">
        <span class="form-fee-content-title-text">新增合同 {{ index + 1 }}</span>
        <view @click="handleDelete(index)">
          <ve-icon name="delete_1" color="rgba(23,22, 22, 1)" size="36" />
        </view>
      </view>

      <view class="form-fee-content-content">
        <ve-form-item label="上传合同">
          <uploadFile v-model:fileId="item.fileId" :fileIndex="index" @change="getFileObj" :fileTypes="['pdf']"></uploadFile>
        </ve-form-item>

        <ve-form-item label="合同有效期" labelPosition="top">
          <ve-daterange-picker
            v-model:start="item.startTime"
            v-model:end="item.endTime"
            :placeholder="['开始时间', '结束时间']"
            mode="datetime"
          />
        </ve-form-item>
        <ve-form-item label="签约人" :borderBottom="false">
          <remote-select
            type="staff_org"
            :label="item.signUserName"
            :params="{
              oldId: item.signUserId,
            }"
            v-model="item.signUserId"
            @change="handleChange"
          />
        </ve-form-item>
      </view>
    </view>
    <view class="ve-form-item-btn" :class="[contractList.length ? 've-form-item-btn-have-data' : '']" @click="handleAdd">
      <ve-icon name="plus" size="30"></ve-icon>
      <span class="ve-form-item-btn-text">新增合同</span>
    </view>
    <view v-if="underline" class="form-fee-borderline"></view>
  </view>
</template>

<script setup>
  // import { inject, provide } from 'vue'
  import uploadFile from '@/components/upload-file/index.vue'
  const props = defineProps({
    contractList: {
      type: Array,
      default: () => [],
    },
    totalFee: {
      type: [String, Number],
      default: '',
    },
    overline: {
      type: Boolean,
      default: true,
    },
    underline: {
      type: Boolean,
      default: true,
    },
  })

  // const form = inject('form')
  // provide('form', form.value)

  const emit = defineEmits(['handleAdd', 'handleDelete', 'handleChange'])

  // 新增
  const handleAdd = () => {
    emit('handleAdd')
  }

  // 删除
  const handleDelete = (e) => {
    emit('handleDelete', e)
  }
  // 选择签约人
  const handleChange = (_, option = {}) => {
    emit('handleChange', option)
  }

  const getFileObj = (e) => {
    console.log('文件file: ', e)
  }
</script>

<style lang="scss" scoped>
  .form-fee-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 23rpx;
    margin-top: 39rpx;
    .form-fee-title-text {
      font-size: 30rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #191c27;
    }
    .form-fee-title-value {
      font-size: 30rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #3072f6;
    }
  }

  .ve-form-item-disabled {
    background: #f6f8f9;
    padding-left: 32rpx;
    padding-right: 32rpx;
    color: #9ea5bb;
    .ve-form-item__body__right__content__unit {
      color: #9ea5bb;
    }

    &.leftLayout {
      .ve-form-item__body__right__content__slot {
        text-align: right;
      }
    }
  }
  .ve-form-item-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 88rpx;
    background: #f3f7ff;
    border-radius: 4rpx 4rpx 4rpx 4rpx;
    opacity: 1;
    border: 2rpx solid #3072f6;
    margin-bottom: 32rpx;
    .ve-form-item-btn-text {
      font-size: 30rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #3072f6;
      margin-left: 18rpx;
    }
  }
  .ve-form-item-btn-have-data {
    margin-top: 32rpx;
  }
  .form-fee-content {
    background: #f7f8fa;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    opacity: 1;
    margin-bottom: 32rpx;
    .form-fee-content-title {
      height: 88rpx;
      box-sizing: border-box;
      padding: 0 24rpx 0 24rpx;
      background: #f0f1f3;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .form-fee-content-title-text {
      font-size: 30rpx;
      font-family: PingFang SC-Semibold, PingFang SC;
      font-weight: 600;
      color: #191c27;
    }
    .form-fee-content-content {
      box-sizing: border-box;
      padding: 0 24rpx 0 24rpx;
    }
  }
  .form-fee-borderline {
    height: 2rpx;
    background: rgba(216, 216, 216, 0.3);
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    opacity: 1;
  }
</style>
